<template>
    <div class="infinite-container" :style="(canpay == 0 && pageBefore != '/medicalAgain/index') ? 'padding-bottom: 80px;' : ''">
        <!-- <div class="lefttime"><span>已过期</span></div> -->
        <!-- <div class="scroll-wraepper"> -->
        <!-- <mu-tabs :value="activeTab" @change="handleTabChange" >
            <mu-tab :value="'tab'+i" :title="tab.title"  v-for="(tab,i) in tabs" :key="i"/>
        </mu-tabs> -->
        <!-- </div> -->
        <!-- <div class="mt10"></div> -->
        <!-- <west-medical :mdata="pageData"></west-medical> -->
        <Recipe :visitNo="$route.query.visitNo" :hospitalCode="hospitalCode" :recipeId="$route.query.recipeId"/>
        <div class="lcon" v-if="canpay == 0 && pageBefore != '/medicalAgain/index'">
          <mu-raised-button label="确认在线购买" fullWidth primary @click="gotoBuy"></mu-raised-button>
        </div>
    </div>
</template>

<script>
// import westMedical from "./westMedical.vue";
import Recipe from "@/components/Recipe.vue";
import {commonAjaxJson, RESTFUL_API} from '../../api/api'
export default {
  data() {
    return {
      hospitalCode: sessionStorage.getItem("hospitalCode") || "",
      activeTab: "tab0",
      tabs: [],
      allData: [],
      pageData: {
        recipeNo: '000000'
      },
      canpay: 0,
      pageBefore: ''
    }
  },
  mounted() {
    // this.getRecipeDetail()
  },
  beforeRouteEnter (to, from, next) {
    if (from.path == '/medicalAgain/index') {
      next(vm => {
        vm.pageBefore = from.path
      })
    } else {
      next()
    }
  },
  components: {
    Recipe
  },
  methods: {
    handleTabChange(val) {
      this.activeTab = val;
      this.pageData = this.allData[val.slice(-1)]
    },
    gotoBuy () {
      if (this.canpay != 0) {
        this.$store.commit('UPDATE_TOAST', {message: '暂无可购买处方'})
        return
      }
      sessionStorage.setItem('mailType', '')
      sessionStorage.setItem('medicalToBuyInfo', JSON.stringify(this.allData))
      sessionStorage.setItem('medicalToBuyCid', this.$route.query.id)
      this.$store.commit('UPDATE_PAGEDATA', this.allData)
      this.$router.push(`submitOrder?id=${this.$route.query.id}`)
    },
    getRecipeDetail() {
      const params = {
        consultId: this.$route.query.id || '',
        visitNo: this.$route.query.visitNo || '',
        recipeId: this.$route.query.recipeId || ''
      }
      commonAjaxJson(RESTFUL_API.getRecipeDetail, params, true).then(res => {
              sessionStorage.setItem('patientMedicalType', res.data.data.list[0].invalidSign)
          // 1是医保
          if (res.data.code == 200 && res.data.data.list.length > 0) {
            let tempTabs = []
            res.data.data.list.forEach((v, i) => {
              // set tab
              if (v.recipeType <=2 ) {
                v.title = '西药处方' + (i+1)
              } else {
                v.title = '中药处方' + (i+1)
              }
              tempTabs.push({
                title: v.title
              })
              // Compute total money
              let tempTotal = 0
              if (v.drugItems) {
                v.drugItems.forEach(v => {
                  tempTotal += parseFloat(v.totalAmount)
                })
              }
              v.totalAmount = tempTotal
            })
            this.tabs = tempTabs
            this.allData = res.data.data
            this.pageData = res.data.data.list[0]
            this.canpay = res.data.data.isBuyed // 0 没买，1买了
          } else {
            this.canpay = 1
          }
        })
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../common/css/flex.css";
@import "../../common/css/component";
.infinite-container {
  // padding-bottom: 80px;
  @{deep} .mu-item-left img {
    width: 30px;
    height: 30px;
  }
  @{deep} .mu-item.show-left {
    padding-left: 60px;
  }
  @{deep} .mu-item-title {
    color: #666;
    font-size: 14px;
  }
  @{deep} .mu-item-text {
    color: #ccc;
  }
  @{deep} .mu-item-right {
    color: #333;
    font-size: 14px;
  }
  @{deep} .mu-item {
    min-height: 44px;
  }
  .scroll-wraepper {
    overflow-x: auto;
  }
  .feeText {
    font-weight: normal;
    color: #0fc47d;
    font-size: 14px;
  }
  .ltxt {
    white-space: nowrap;
    color: #666;
    padding-right: 10px;
    font-size: 14px;
  }
  .ltxt1 {
    white-space: nowrap;
    color: #999;
    font-size: 14px;
  }
  .lefttime {
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #ff6600;
    background: #fffdce;
    border-bottom: 1px solid #e8e8e8;
  }

  .lcon {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    @{deep}.mu-raised-button {
      width: 80%;
      height: 44px;
      margin-top: 20px;
    }
    @{deep}.mu-raised-button-secondary {
      color: #f24242;
      border: 1px solid #f24242;
      background: #fff1f1;
    }
  }
}
</style>
